<template>
  <div>
    <div class="dropdown">
      <span class="dropbtn">全部分类</span>

      <i class="el-icon-arrow-down el-icon--right"></i>
      <div class="dropdown-content">
        <a class="kong"></a>
        <a><img src="./4.png" alt="" />新鲜水果 </a>
        <a><img src="./2.png" alt="" />生猛海鲜</a>
        <a><img src="./6.png" alt="" />肉类家禽</a>
        <a><img src="./8.png" alt="" />蛋奶素食</a>
        <a><img src="./5.png" alt="" />田园蔬菜</a>
        <a><img src="./7.png" alt="" />零食酒水</a>
        <a><img src="./9.png" alt="" />粮油杂货</a>
        <a><img src="./3.png" alt="" />礼品卡券</a>
        <a><img src="./1.png" alt="" />家具用品</a>
      </div>
    </div>


   </div>


</template>

<script>
export default {
  name: 'tab',
};
</script>
<style>
.kong {
  position: absolute;
  top: -40px;
  opacity: 0;
}
#app>div .dropdown .dropbtn{
  display: none;
}
#app>div .dropdown i{
  display: none;
}
#app .bb ul .box div .dropdown .dropbtn{
  display: inline-block;
  position: relative;
  width: 80px;
  /* border: 1px #f00 solid; */
  color: #333;
  font-size: 16px;
}
#app .bb ul .box div .dropdown i{
  display: inline-block;
  position: relative;
  left: 15px;
}
.dropbtn {
  background-color: #fff;
  color: #666;
  font-size: 16px;
  width: 170px;
  cursor: pointer;
  position: relative;
  text-align: center;
  z-index: 100;
}

.dropdown {
  position: relative;
  display: inline-block;
}
img {
  margin-right: 10px;
  line-height: 50px;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 170px;
  top: 35px;
  left: -34px;
  text-align: center;
  background-color: #fff;
  line-height: 50px;
  z-index: 100;
}

.dropdown-content a {
  color: #333;
  width: 170px;
  height: 50px;
  text-decoration: none;
  display: block;
  text-align: center;
  border-top: 1px #ccc solid;
}

.dropdown-content a:hover {
  background-color: #fff;
}
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #fff;
}
</style>
